<template>
  <div class="code-editor-container">
    <div class="code-header">
      <div class="code-title-section">
        <img class="code-icon" src="@/assets/ide/daima.png" />
        <el-select
          v-model="laguage"
          placeholder="Java"
          class="language-selector"
          @change="handleLanguageChange"
        >
          <el-option v-for="item in laguages" :key="item" :label="item" :value="item" />
        </el-select>
      </div>
      <div class="code-actions">
        <el-tooltip
          content="需要提交运行代码后，才能进行代码优化哦！"
          placement="top"
          :disabled="hasSubmittedCode"
        >
          <el-button type="success" plain @click="handleAISuggest" :disabled="!hasSubmittedCode">
            <el-icon><MagicStick /></el-icon>
            AI代码优化建议
          </el-button>
        </el-tooltip>
        <el-button type="primary" plain @click="handleSubmit">提交代码</el-button>
      </div>
    </div>
    <div ref="editorform" class="ace-editor"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import ace from 'ace-builds'
import 'ace-builds/src-noconflict/mode-java'
import 'ace-builds/src-noconflict/theme-eclipse'
import 'ace-builds/src-noconflict/ext-language_tools'
import { MagicStick } from '@element-plus/icons-vue'

const laguages = ref(['Java'])

// 创建响应式引用
const laguage = ref('')
const editorform = ref(null)
let editor = null
const emit = defineEmits(['update:value', 'submit', 'aiSuggest'])

const options = {
  theme: `ace/theme/eclipse`,
  mode: `ace/mode/java`,
  // maxLines: 25,
  // minLines: 25,
  fontSize: 18
}

// 初始化编辑器
onMounted(() => {
  editor = ace.edit(editorform.value, options)
  editor.setOptions({
    enableBasicAutocompletion: true
  })
  editor.getSession().on('change', () => {
    // 当编辑器内容变化时，触发自定义事件并传递编辑器的内容
    emit('update:value', editor.getValue())
  })
})

// 销毁编辑器实例
onBeforeUnmount(() => {
  if (editor) {
    editor.destroy()
    editor = null
  }
})

function setAceCode(content) {
  editor.setValue(content)
}

// 调整编辑器尺寸
function resizeEditor() {
  if (editor) {
    editor.resize()
  }
}

// 语言切换处理
function handleLanguageChange() {
  // 这里可以添加切换编辑器语言模式的逻辑
}

// 提交代码处理
function handleSubmit() {
  emit('submit')
}

// AI代码建议处理
function handleAISuggest() {
  emit('aiSuggest')
}

defineExpose({
  setAceCode,
  resizeEditor
})
</script>

<style lang="scss" scoped>
.code-editor-container {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 10px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.code-header {
  background-color: rgba(240, 240, 240, 1);
  border-radius: 10px 10px 0px 0px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  min-width: 0;
  flex-shrink: 0;
  overflow: hidden;

  .code-title-section {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1;
    max-width: calc(100% - 240px); // 确保按钮有足够空间

    .code-icon {
      width: 18px;
      height: 14px;
      margin-right: 8px;
      flex-shrink: 0;
    }

    .language-selector {
      width: 80px;
      flex-shrink: 0;
    }
  }

  .code-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
  }

  .el-button {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 13px;
    padding: 6px 12px;
    min-width: 80px;

    &:first-child {
      min-width: 140px;
    }
  }
}

.ace-editor {
  flex: 1;
  line-height: 1.8;
  height: 100vh;
}
</style>
